<template>
  <view class="center">
    <!-- 没手机号显示 -->
    <view class="no-ishpone" v-if="!isPhone">
      <view class="logo-title">
        <view class="logo-img"><image src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/addwx/logo.png"></image></view>
        <view class="header-title">
          <view class="title">大爆炸思维</view>
          <view class="subTitle">编程是工具 思维建模更重要</view>
        </view>
      </view>
      <view class="input-btn-box">
        <input 
          class="phone-input" 
          placeholder-style="font-size: 24rpx;font-weight: normal" 
          placeholder="请输入手机号" 
          maxlength="11" 
          type="digit"
          v-model="fromData.PhoneNumber"
        />
        <view class="codeInput-btn">
          <input 
            class="code-input" 
            placeholder-style="font-size: 24rpx;font-weight: normal" 
            placeholder="请输入验证码" 
            maxlength="6" 
            type="digit"
            v-model="fromData.SmsCode"
          />
          <view class="get-code" v-if="showbtn" @click="getCode">{{ codeName }}</view>
          <view class="get-code" v-else>{{ codeName }}</view>
        </view>
        <view class="btn-primary" @click="affirmBtn">确认</view>
      </view>
      <!-- 协议 -->
      <view class="agreement">
        <checkbox-group @change="checkboxChange">
          <checkbox value="cb"/>
        </checkbox-group>
        <view>绑定表示同意<text style="color: #7B61FF;" @click="userAgreement">用户协议</text>、<text style="color: #7B61FF;" @click="privacy">隐私政策</text></view>
      </view>
    </view>
    <!-- 有手机号显示 -->
    <view v-else class="binding-phone">
      <view class="dingdign-phone-img"><image src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/my/Binding_1.png"></image></view>
      <view class="phone">{{ isPhoneNum }}</view>
      <view class="subTitle">当前登录账号</view>
      <view class="at-present">是否将手机号与大爆炸思维课堂服务号绑定</view>
      <view class="confirm-binding" @click="baindingPhone">确认绑定</view>
      <view class="trade-phone" @click="isPhone = false">更换绑定号码</view>
      <!-- 更换手机弹窗 -->
      <banding-phone ref="popupTrade"></banding-phone>
    </view>
  </view>
</template>

<script>
  import { queryBindState, bindPhone, BirectPhone, noteVerify } from '@/utils/api.js' // 接口api
  import bandingPhone from '@/components/loding/binding.vue'
  export default {
    components: { bandingPhone },
    data() {
      return{
        isPhoneNum: '', // 知道手机号码
        phonePath: '/pages/binding_phone/index', // 需要传给子组件的地址
        fromData: { // 绑定手机参数
          PhoneNumber:'', // 手机号
          SmsCodeToken:'', // 短信返回的token
          SmsCode:'' // 输入的验证码
        },
        regPhone: /^[1][3,4,5,6,7,8,9][0-9]{9}$/, // 手机正则
        codeName: '获取验证码',
        secTime: 60, // 倒计时秒数
        showbtn: true, // 展示获取验证码或倒计时按钮判断
        checkStatus: 0,
        phoneNum: '',
        isPhone: false,
      }
    },
    onLoad(param) {
      const vm = this
      const authorization = uni.getStorageSync('authorization')
     if(vm.$wechat.isWechat()){
       if(!authorization){
         vm.$auth.init()
       }
      }
      if(param.num == 0) {
        vm.isPhone = true
      }

    },
    mounted() {
      setTimeout(() => {
         this.queryPhone()
      },1000)
    },
    methods:{
      /* 确认绑定
         如果phoneData.anewLogin为true需要重新获取token，更新个人信息
         如果phoneData.phoneNumber为true，绑定成功跳成功页
         否则就是报错
      */ 
      async affirmBtn() {
        if(!this.getVerify()) return
         const phoneData = await bindPhone(this.fromData)
         if(phoneData.anewLogin) {
          const openId = uni.getStorageSync('openId')
          vm.$auth.getServeToken(openId)
          uni.reLaunch({
            url: '/pages/binding_phone/binding_success'
          })
         }if(phoneData.phoneNumber) {
           uni.showToast({  title:'绑定成功',icon:'none' })
           uni.reLaunch({
             url: '/pages/binding_phone/binding_success'
           })
         }
         if(phoneData.errorCode != 0 ){
           uni.showToast({ title:phoneData.message,icon:'none' })
         }
      },
      // 获取验证码
      async getCode() {
        if (!this.fromData.PhoneNumber){
          uni.showToast({  title:'请输入手机号码！',icon:'none' })
          return false
        }
        this.getyzcode()
        const res = await noteVerify({
          phoneNumber: this.fromData.PhoneNumber,
          templateCode: 'SMS_226810366'
        })
        if(res.code === 0) {
          this.fromData.SmsCodeToken = res.result
        }
      },
      // 60秒倒计时
      getyzcode () {
        let timer = setInterval(() => {
          this.secTime = this.secTime - 1
          this.codeName = this.secTime + 'S后重试'
          this.showbtn = false
          if (this.secTime === 0) {
              clearInterval(timer)
              this.secTime = 60
              this.codeName = "获取验证码"
              this.showbtn = true
          }
        }, 1000)
      },
       // 查询是否绑定了手机号码
       async queryPhone() {
        const vm = this
        const res = await queryBindState()
        if (res.errorCode == 0) {
          uni.setStorageSync('Bindingphone', res)
          if(!res.bindstate && res.phoneNumber) {
            vm.isPhone = true
            vm.isPhoneNum = res.phoneNumber
          }if(!res.bindstate && !res.phoneNumber){
            vm.isPhone = false
          }
          if(res.bindstate) {
            uni.reLaunch({
              url: '/pages/binding_phone/binding_success'
            })
          }
        }
      },
      // 验证
      getVerify() {
        if (!this.checkStatus) {
           uni.showToast({  title:'请勾选协议！',icon:'none' })
           return false
        }
        if (!this.fromData.PhoneNumber){
          uni.showToast({  title:'请输入手机号码！',icon:'none' })
          return false
        }
        if(this.fromData.PhoneNumber && !this.regPhone.test(this.fromData.PhoneNumber)) {
          uni.showToast({  title:'手机号码格式不正确',icon:'none' })
          return false
        }
        if(!this.fromData.SmsCode) {
          uni.showToast({  title:'请输入验证码',icon:'none' })
          return false
        }
        return true
      },
      // 跳隐私政策
      privacy() {
        uni.navigateTo({
          url: '/pages/my/protocol/index'
        })
      },
      // 跳用户协议
      userAgreement() {
        uni.navigateTo({
          url: '/pages/my/protocol/userAgreement'
        })
      },
      // 复选框事件
      checkboxChange(e) {
        this.checkStatus = e.detail.value.length
      },
      // 打开换手机号弹窗
      tradePhone() {
        this.$refs.popupTrade.getPopupOpen()
      },
      // 知道手机号码-确认绑定
      async baindingPhone() {
         const res = await BirectPhone()
         if(res.errorCode == 0) {
           uni.reLaunch({
             url: '/pages/binding_phone/binding_success'
           })
         }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .center{
    image{
      width: 100%;
      height: 100%;
    }
    .no-ishpone{
      .logo-title{
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 64rpx 0 192rpx 0;
        .logo-img{
          width: 80rpx;
          height: 80rpx;
        }
        .header-title{
          margin-left: 16rpx;
          .title{
            font-size: 32rpx;
            font-weight: bold;
          }
          .subTitle{
            font-size: 20rpx;
            color: #262626;
            margin-top: 6rpx;
          }
        }
      }
      .input-btn-box{
        // padding: 0rpx 80rpx;
      .phone-input{
        width: 464rpx;
        height: 72rpx;
        line-height: 72rpx;
        background: #FFFAE8;
        border: 2rpx solid #FFDAB9;
        border-radius: 36rpx;
        margin: 18rpx 0 48rpx 0;
        padding-left: 32rpx;
        box-sizing: border-box;
        text-align: left;
        color: #FF800C;
        font-weight: bold;
        font-size: 32rpx;
        margin: auto;
      }
      .codeInput-btn{
        width: 464rpx;;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: auto;
        margin-top: 32rpx;
        margin-bottom: 48rpx;
        .code-input{
          width: 256rpx;
          height: 72rpx;
          line-height: 72rpx;
          background: #FFFAE8;
          border: 2rpx solid #FFDAB9;
          border-radius: 36rpx;
          padding-left: 32rpx;
          text-align: left;
          box-sizing: border-box;
          color: #FF800C;
          font-weight: bold;
        }
        .get-code{
          width: 192rpx;
          height: 72rpx;
          border: 2rpx solid #FF800C;
          border-radius: 36rpx;
          text-align: center;
          line-height: 72rpx;
          color: #FF800C;
          font-size: 28rpx;
        }
      }
      .btn-primary{
         width: 464rpx;
         height: 72rpx;
         border-radius: 36rpx;
         line-height: 72rpx;
         background: #FF800C;
         color: #FFFFFF;
         text-align: center;
         margin: auto;
      } 
    }
      .agreement{
        position: fixed;
        left: 0;
        right: 0;
        bottom: 96rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #8C8C8C;
        font-size: 20rpx;
        checkbox /deep/ .uni-checkbox-input.uni-checkbox-input-checked{
          width: 20rpx;
          height: 20rpx;
          background: #FF800C;
          border: 2rpx solid #FF800C;
          border-radius: 50%;
          color: #FFFFFF;
          margin-top: 10rpx;
         }
         checkbox /deep/ .uni-checkbox-input {
          width: 20rpx;
          height: 20rpx;
          border: 2rpx solid #ccc;
          border-radius: 50%;
          margin-bottom: 10rpx;
          margin-top: 10rpx;
         }
         // √样式
         checkbox /deep/ .uni-checkbox-input.uni-checkbox-input-checked::before{
           width: 15rpx;
           height: 15rpx;  
          line-height: 15rpx;
          text-align: center;
          font-size: 15rpx;
          color: #fff;
          background: transparent;
          transform: translate(-50%, -50%) scale(1);
          -webkit-transform: translate(-50%, -50%) scale(1);
         }
      }
    }
    // 有手机号显示
    .binding-phone{
      text-align: center;
      padding-top: 80rpx;
      font-size: 28rpx;
      .dingdign-phone-img{
        width: 240rpx;
        height: 240rpx;
        margin: auto;
      }
      .phone{
        font-size: 36rpx;
        font-weight:bold;
        margin: 40rpx 0 16rpx 0;
      }
      .subTitle{
        font-size: 20rpx;
        color: #8c8c8c;
      }
      .at-present{
        font-size: 20rpx;
        color: #8c8c8c;
        margin: 8rpx 0 48rpx 0;
      }
      .confirm-binding{
        width: 464rpx;
        height: 72rpx;
        background: #FF800C;
        border-radius: 36rpx;
        font-size: 32rpx;
        color: #FFFFFF;
        line-height: 72rpx;
        font-weight: bold;
        text-align: center;
        letter-spacing: 0.2em;
        margin: auto;
      }
      .trade-phone{
        color: #FF800C;
        font-size: 24rpx;
        margin-top: 16rpx;
      }
    }
  }
</style>
